<template>
  <div>
   <el-card class="box-card">
  <div slot="header" class="clearfix">
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>评论管理</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <!-- 品论表格 -->
   <el-table
      :data="formcommentinfo"
      style="width: 100%">
      <el-table-column
        prop="title"
        label="标题"
        width="350">
      </el-table-column>
      <el-table-column
        prop="total_comment_count"
        label="总评论数"
        width="350">
      </el-table-column>
      <el-table-column
        prop="fans_comment_count"
        label="粉丝评论数"
        width="350">
      </el-table-column>
      <el-table-column
        label="状态"
        width="350">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.comment_status"
            @change ='changeevent(scope)'
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
        <el-table-column
        label="操作"
        >
        <template slot-scope="scope">
          <el-button type="danger" 
          @click="closecommnet(scope)">关闭评论</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
     background
     :disabled='disabled'
     layout="prev, pager, next"
     :total="(total/20)"
     @current-change="handleCurrentChange">
</el-pagination>
</el-card>
  </div>
</template>

<script>
  export default {
    name:'comment',
    data () {
      return {
        formcommentinfo:[],
        page:1,
        total:'',
        disabled:false
      }
    },
    created () {
      this.getcomment()
    },
    methods: {
      //获取文章统计数据
      async getcomment(){
        this.disabled=true
        let res  = await this.$http.get('/mp/v1_0/articles',{
          params:{
            page:this.page,
            per_page:20,
            response_type:'comment'
          }
        })
       this.formcommentinfo = res.data.data.results
       this.total = res.data.data.total_count
       this.disabled = false
      },
      handleCurrentChange(val){
        this.page = val
        this.getcomment()
    },
    // 获取评论状态文章
     async changeevent(scope){
       console.log(scope.row.comment_status)
      const  article_id = scope.row.id.toString()
       if(scope.row.comment_status){
         let res= await  this.$http({
           method:'put',
           url:'/mp/v1_0/comments/status',
           params:{
             article_id
           },
           data:{
             allow_comment:true
           }
         })
           this.$message({
            type: 'success',
            message: '成功改变状态'
          });
       }else{
         let res= await  this.$http({
           method:'put',
           url:'/mp/v1_0/comments/status',
           params:{
             article_id
           },
           data:{
             allow_comment:false
           }
         })
          this.$message({
           type: 'success',
           message: '成功改变状态'
          }); 
       }
     },
    //  关闭文章状态
     async closecommnet(scope){
     scope.row.comment_status= false
     this.changeevent(scope)
     }
    }
    
  }
</script>

<style lang="less" scoped>
  .el-breadcrumb{
    font-size: 18px;
  }
  .el-pagination{
    margin: 50px  0 0   1000px;
  }
</style>